<template>
    <div class="advanced-user-stats">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>用户统计</span>
            <el-button type="primary" @click="fetchData">刷新数据</el-button>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-item">
                <span class="label">总用户数</span>
                <span class="value">{{ stats.totalUsers }}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-item">
                <span class="label">今日新增用户</span>
                <span class="value">{{ stats.newUsersToday }}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-item">
                <span class="label">活跃用户</span>
                <span class="value">{{ stats.activeUsers }}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="stat-item">
                <span class="label">付费用户</span>
                <span class="value">{{ stats.paidUsers }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <div ref="userChart" style="width: 100%; height: 400px;"></div>
          </el-col>
          <el-col :span="12">
            <div ref="activityChart" style="width: 100%; height: 400px;"></div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        stats: {
          totalUsers: 0,
          newUsersToday: 0,
          activeUsers: 0,
          paidUsers: 0,
        },
        userChart: null,
        activityChart: null,
      };
    },
    mounted() {
      this.fetchData();
      this.initCharts();
    },
    methods: {
      async fetchData() {
        try {
          const response = await axios.get('https://api.example.com/user-stats');
          this.stats = response.data;
          this.updateCharts();
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      initCharts() {
        this.userChart = this.$echarts.init(this.$refs.userChart);
        this.activityChart = this.$echarts.init(this.$refs.activityChart);
  
        this.userChart.setOption({
          title: { text: '用户增长趋势' },
          tooltip: { trigger: 'axis' },
          xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
          yAxis: {},
          series: [{ name: '用户数', type: 'line', data: [120, 200, 150, 80, 70, 110, 130] }]
        });
  
        this.activityChart.setOption({
          title: { text: '用户活跃度' },
          tooltip: { trigger: 'axis' },
          xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
          yAxis: {},
          series: [{ name: '活跃用户数', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130] }]
        });
      },
      updateCharts() {
        const userTrendData = [120, 200, 150, 80, 70, 110, 130]; // 替换为实际数据
        const activityData = [120, 200, 150, 80, 70, 110, 130]; // 替换为实际数据
  
        this.userChart.setOption({
          series: [{ data: userTrendData }]
        });
  
        this.activityChart.setOption({
          series: [{ data: activityData }]
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .advanced-user-stats {
    padding: 20px;
    width: 1300px;
    height: auto;
    background-color: rgba(88, 181, 132, 0.242);
    margin-left: 180px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .label {
    color: #909399;
  }
  
  .value {
    color: #303133;
    font-weight: bold;
  }
  </style>
  